<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/jquery.fullPage.css"/>
    <link rel="stylesheet" href="css/quanpingqiehuan.css"/>
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>

    <script>
        $(function(){
            $.fn.fullpage({
                anchors:['page1','page2','page3','page4'],
                slidesColor:['red','green','blue','#d3d3d3'],
                navigation:true, //设置使用默认导航
                navigationTooltips:['首页','第二屏','第三屏','第四屏']  //设置导航名
            });
        });
    </script>
</head>
<body>
    <section class="section section1 ">
        <!--1.背景图-->
        <div class="bg"><img src="img/section1.jpg" alt=""/></div>

        <!--2.中间部分-->
        <div class="bg12"></div>
        <div class="bg13"></div>

        <!--3.顶部及中间的内容-->
        <div class="mail">
            <a href="" class="mail-163">163邮箱</a>
            <a href="" class="mail-126">126邮箱</a>
            <a href="" class="mail-yeah">yeah邮箱</a>
        </div>
        <div class="hgroup">
            <img src="img/slogan.png" alt=""/>
            <!--<h1><a href="#">网易邮箱6.0</a></h1>
            <h2>改变,不止所见。</h2>-->
        </div>

    </section>
    <section class="section section2">
        <!--背景-->
        <div class="sec2_bg"><img src="img/section2.jpg" alt=""/></div>
        <!--图片-->
        <div class="bg21"></div>
        <div class="bg22"></div>
        <div class="bg23"></div>
        <!--文字-->
        <div class="see">
            <span>[视觉·简]</span>
            <h3>华丽蜕变，尽享愉悦之美</h3>
            <p>秉承网易邮箱经典的清新简洁的设计风格，邮箱 6.0 版带来全新一代的设计理念，更追求极致唯美的视觉设计、传承更多人文和艺术底蕴，华丽蜕变，带来更舒服更爽心悦目的视觉享受。</p>
        </div>
    </section>
    <section class="section section3">
        <div class="sec3_bg"><img src="img/section3.jpg" alt=""/></div>
        
        <div class="bg31"></div>
        <div class="bg32"></div>
        <div class="bg33"></div>
        
        <div class="topic">
            <p>[ 视觉化交互设计 ]</p>
            <img src="img/t3.png" alt=""/>
        </div>
        <div class="jiaohu">
            邮箱 6.0 版采用了全新的视觉化交互设计，通过对界面的整体风格设计、重要信息的视觉化处理以及元素本身的视觉传达优化，来实现产品流程设计和交互行为塑造。从视觉的角度出发，让用户无需多想，直接通过感官与产品进行交互。

        </div>
    </section>
    <section class="section section4">
        <div class="sec2_bg"><img src="img/section4.jpg" alt=""/></div>
    </section>

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
</body>
</html>